<template>
  <tm-app class="container">
    <tm-sheet>
      <!-- 搜索框 -->
      <tm-input  @search="handleSearch"  :round="25" :border="1" v-model="searchKeyword" showClear="true"
        searchLabel="搜索"></tm-input>

      <!-- 轮播图 -->
      <!-- <swiper class="carousel" autoplay circular>
  <swiper-item v-for="(item, index) in banners" :key="index">
    <image :src="item.image" class="carousel-img" />
  </swiper-item>
</swiper> -->

      <tm-carousel autoplay :round="3" :width="710" :list="banners"></tm-carousel>

      <!-- 每日推荐 -->
      <view class="section-title">
        <text>每日推荐</text>
        <!-- <text class="more" @click="navTo('recommend')">更多 ></text> -->
      </view>
      <scroll-view scroll-x class="recommend-scroll">
        <view v-for="song in recommendations" :key="song.musicId" class="recommend-item" @click="playSongs(song)">
          <image :src="song.imageUrlUrl" class="recommend-cover" />
          <text class="recommend-title">{{ song.title}}</text>
        </view>
      </scroll-view>

      <!-- 新歌速递 -->
      <view class="section-title">
        <text>新歌速递</text>
      </view>
      <view class="new-song-grid">
        <view v-for="song in newSongs" :key="song.musicId" class="grid-item" @click="playSongs(song)">
          <view class="cover-wrapper">
            <image :src="song.imageUrlUrl" class="song-cover" />
            <text class="new-tag">NEW</text>
          </view>
          <text class="song-title">{{ song.title }}</text>
          <text class="singer">{{ song.artistVo.artistName }}</text>
        </view>
      </view>

      <!-- 热门歌曲 -->
      <view class="section-title">
        <text>热门榜单</text>
        <!-- <text class="more" @click="navTo('rank')">完整榜单 ></text> -->
      </view>
      <view class="hot-list">
        <view v-for="(song, index) in hotSongs" :key="song.musicId" class="hot-item" @click="playSongs(song)">
          <text class="index">{{ index + 1 }}</text>
          <image :src="song.imageUrlUrl" class="hot-cover" />
          <view class="hot-info">
            <text class="title">{{ song.title }}</text>
            <text class="singer">{{ song.artistVo.artistName }}</text>
          </view>
          <text class="play-count">🔥 {{ song.playCount>10000? (song.playCount/10000).toFixed(1)+'万': song.playCount}}</text>
        </view>
      </view>
    </tm-sheet>

  </tm-app>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { getSwiperList, getNewSongs, getHotSongs, getRecommend } from '../../api/index/index';
import {onLoad} from '@dcloudio/uni-app'
import { playSongs } from '../../common/index';
// 模拟数据
const banners = ref([
])

const recommendations = ref([
  { musicId: 1, title: '推荐歌曲1', artistVo:{artistName:'歌手A'}, imageUrlUrl: 'https://via.placeholder.com/200x200' },
  { musicId: 2, title: '推荐歌曲2', artistVo:{artistName:'歌手B'}, imageUrlUrl: 'https://via.placeholder.com/200x200' },
  { musicId: 3, title: '推荐歌曲3', artistVo:{artistName:'歌手C'}, imageUrlUrl: 'https://via.placeholder.com/200x200' }
])

const newSongs = ref([
  { id: 4, name: '新歌1', artist: '歌手D', cover: 'https://via.placeholder.com/200x200', date: '2024-03-01' },
  { id: 5, name: '新歌2', artist: '歌手E', cover: 'https://via.placeholder.com/200x200', date: '2024-03-01' },
  { id: 6, name: '新歌3', artist: '歌手F', cover: 'https://via.placeholder.com/200x200', date: '2024-03-01' },
  { id: 7, name: '新歌4', artist: '歌手G', cover: 'https://via.placeholder.com/200x200', date: '2024-03-01' }
])

const hotSongs = ref([
  { id: 8, name: '热门歌曲1', artist: '歌手H', playCount: 256, cover: 'https://via.placeholder.com/100x100' },
  { id: 9, name: '热门歌曲2', artist: '歌手I', playCount: 198, cover: 'https://via.placeholder.com/100x100' },
  { id: 10, name: '热门歌曲3', artist: '歌手J', playCount: 165, cover: 'https://via.placeholder.com/100x100' },
  { id: 11, name: '热门歌曲3', artist: '歌手J', playCount: 165, cover: 'https://via.placeholder.com/100x100' },
  { id: 12, name: '热门歌曲3', artist: '歌手J', playCount: 165, cover: 'https://via.placeholder.com/100x100' },
  { id: 13, name: '热门歌曲3', artist: '歌手J', playCount: 165, cover: 'https://via.placeholder.com/100x100' },
])

// 搜索相关
const searchKeyword = ref('')
// const filteredHotSongs = computed(() => {
//   if (!searchKeyword.value) return hotSongs.value
//   return hotSongs.value.filter(song =>
//     song.name.includes(searchKeyword.value) ||
//     song.artist.includes(searchKeyword.value)
//   )
// })

// 播放功能
const currentSong = ref(null)
const playSong = (song) => {
  currentSong.value = song
  uni.showToast({
    title: `播放: ${song.name}`,
    icon: 'none'
  })
}

// 页面跳转
const navTo = (page) => {
  uni.navigateTo({ url: `/pages/index/${page}`})
}

const handleSearch = () => {
  uni.navigateTo({ url: '/pages/index/search?keyword=' + searchKeyword.value })
}

onLoad(() => {
  getSwiperList().then(({data}) => {
    console.log(data.rows);
    banners.value = data.rows.map(item => item.imageUrlUrl)
    
  })
  getNewSongs().then(({data}) => {
    console.log(data.data);
    newSongs.value = data.data
  })
  getHotSongs().then(({data}) => {
    console.log(data.data);
    hotSongs.value = data.data
  })
  getRecommend().then(res => {
    console.log(res.data);
    recommendations.value = res.data.data
    console.log(res.data.msg,res.data.data);
    
  })
})

</script>

<style lang="scss" scoped>
.container {
  background: 'white';
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  font-size: 34rpx;
  font-weight: bold;
}

.more {
  font-size: 28rpx;
  color: #666;
}

.carousel {
  height: 300rpx;
  border-radius: 16rpx;
  overflow: hidden;

  &-img {
    width: 100%;
    height: 100%;
  }
}

.recommend-scroll {
  white-space: nowrap;
  padding-bottom: 20rpx;

  .recommend-item {
    display: inline-block;
    width: 200rpx;
    margin-right: 30rpx;

    .recommend-cover {
      width: 200rpx;
      height: 200rpx;
      border-radius: 16rpx;
    }

    .recommend-title {
      display: block;
      font-size: 28rpx;
      padding: 10rpx 0;
    }
  }
}

.new-song-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 20rpx;

  .grid-item {
    background: white;
    border-radius: 16rpx;
    padding: 20rpx;

    .cover-wrapper {
      position: relative;

      .song-cover {
        width: 100%;
        height: 320rpx;
        border-radius: 12rpx;
      }

      .new-tag {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        background: #ff4545;
        color: white;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
    }

    .song-title {
      display: block;
      font-size: 28rpx;
      margin-top: 10rpx;
    }

    .singer {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.hot-list {
  background: white;
  border-radius: 16rpx;
  margin: 20rpx;

  .hot-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1rpx solid #eee;

    .index {
      width: 80rpx;
      text-align: center;
      color: #999;
    }

    .hot-cover {
      width: 100rpx;
      height: 100rpx;
      border-radius: 12rpx;
    }

    .hot-info {
      flex: 1;
      margin-left: 20rpx;

      .title {
        font-size: 30rpx;
      }

      .singer {
        font-size: 24rpx;
        color: #666;
      }
    }

    .play-count {
      font-size: 24rpx;
      color: #ff4545;
    }
  }
}
</style>
